<template>
  <div class="overall-card" ref="overall">
    <el-card shadow="never">
      <div slot="header" class="title" ref="title">
        <span>按组织形式统计</span>
        <div>
          <el-button size="small" plain autofocus>企业户数</el-button>
          <el-button size="small" plain>注册资本</el-button>
        </div>
      </div>

      <echarts
          id="overall-card"
          v-if="echartHeight"
          :options="options"
          :width="echartWidth"
          :height="echartHeight"
      />
    </el-card>
  </div>
</template>

<script>
import Echarts from '../echarts/index.vue'

export default {
  name: 'OverallCard',
  components: { Echarts },
  data () {
    return {
      echartWidth: null,
      echartHeight: null,
      options: {
        tooltip: {
          trigger: 'item'
        },
        title: {
          text: '企业总户数',
          x: 'center',
          y: 'center',
          top: '115',
          textStyle: {
            fontFamily: 'PingFangSC-Regular',
            fontSize: 14,
            color: 'rgba(0,0,0,0.45)',
            lineHeight: 22
          }
        },
        graphic: [
          {
            //设置饼状图内部文字
            type: 'text',
            left: 'center',
            //设置偏移量
            top: 145,
            z: 2,
            zlevel: 100,
            style: {
              text: '123,224',
              x: 100,
              y: 100,
              textAlign: 'center',
              fill: 'rgba(0,0,0,0.85)',
              width: 117,
              height: 38,
              textFont: 'normal 30px HelveticaNeue',
            }
          },
        ],
        legend: {
          top: '15%',
          orient: 'vertical',
          left: 'right',
          icon: 'circle',
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '公司制', itemStyle: { color: '#3BA0FF' } },
              { value: 735, name: '非公司制', itemStyle: { color: '#36CBCB' } },
              { value: 580, name: '有限责任公司', itemStyle: { color: '#4DCB73' } },
              { value: 484, name: '中外合资', itemStyle: { color: '#FAD337' } },
              { value: 484, name: '中外合作', itemStyle: { color: '#F2637B' } },
              { value: 484, name: '全名所有制', itemStyle: { color: '#EFBA1C' } },
              { value: 484, name: '集体企业', itemStyle: { color: '#657798' } },
              { value: 484, name: '联营企业', itemStyle: { color: '#5B8FF9' } },
              { value: 484, name: '其他', itemStyle: { color: '#63DAAB' } },
            ]
          }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.echartWidth = this.$refs.overall.clientWidth - 20 * 2
      const headerHeight = document.getElementsByClassName('el-card__header')[0].offsetHeight
      this.echartHeight = this.$refs.overall.clientHeight - headerHeight - 20 * 2
    })
  }
}
</script>

<style lang="scss" scoped>
.overall-card {
  .el-card {
    /deep/ .el-card__header {
      padding: 11px 20px !important;
    }

    // /deep/ .el-card__body {
    //     padding: 20px 40px !important;
    // }
  }

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 24px;

    span {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
    }

    div {
      width: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>